/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Text, View, ImageBackground, ScrollView, StatusBar, SafeAreaView,
} from "react-native";
// import EZSwiper from "react-native-ezswiper";
import SplashScreen from "react-native-splash-screen";
import { connect } from "react-redux"; // 引入connect函数
import Carousel from "react-native-snap-carousel";
import { TouchableOpacity } from "react-native-gesture-handler";
import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NetWorkUtil from "../utils/NetWorkUtil";
import NavigatorUtil from "../utils/NavigatorUtil";
import ImageButton from "../widget/common/ImageButton";
import NCText from "../widget/common/NCText";
import Tag from "../widget/common/Tag";
import HolderImage from "../widget/common/HolderImage";
import HotPhoneItem from "../widget/listitem/HotPhoneItem";
import * as homeAction from "../actions/homeAction"; // 导入action方法
import * as mineAction from "../actions/mineAction"; // 导入action方法
import { WXLogin } from "../utils/WeichatUtils";

const BANNERLEFT = 20 * scale;

class Home extends Component {
  componentWillMount() {
    const { props } = this;
    props.dispatch(homeAction.getBanners());
    props.dispatch(homeAction.getHotTagList());
  }

  componentDidMount() {
    setTimeout(() => SplashScreen.hide(), 2000);
  }

  postLogin = () => {
    NavigatorUtil.openH5Page("https://www.baidu.com", "");
  };

  renderImageRow = ({ item, index }) => {
    return (
      <HolderImage
        source={{ uri: NetWorkUtil.getFileUrl(item.banner_src) }}
        style={styles.banner}
        resizeMode="stretch"
      />
    );
  };

  renderSwiper() {
    const { homeReducer } = this.props;
    const { banners, initing } = homeReducer;
    return (
      <View style={styles.swiper}>
        <Carousel
          ref={c => {
            this._carousel = c;
          }}
          loop
          autoplay
          autoplayInterval={5000}
          data={banners}
          renderItem={this.renderImageRow}
          sliderWidth={ScreenWidth}
          itemWidth={ScreenWidth - 2.6 * BANNERLEFT}
          layout="default"
        />
      </View>
    );
  }

  handleGetStoreAddress = () => {
    const { props } = this;
    if (global.hasLoggedin) {
      props.dispatch(
        mineAction.getStoreLocation(address => {
          NavigatorUtil.goStoreAddress(address);
        }),
      );
    } else {
      // NavigatorUtil.goModalLogin();
      WXLogin().then(this.handleGetStoreAddress);
    }
  };

  renderMainButtons() {
    return (
      <View style={styles.buttonsContainer}>
        <ImageButton
          source={require("../img/ic_weixiu.png")}
          text="手机维修"
          style={styles.flex}
          itMargin={0}
          imgHeight={scale * 62}
          imgWidth={scale * 58}
          onPress={() => NavigatorUtil.goChooseTrouble()}
        />
        <ImageButton
          source={require("../img/ic_phone_recycle.png")}
          text="手机回收"
          style={styles.flex}
          itMargin={0}
          imgHeight={scale * 60}
          imgWidth={scale * 56}
          onPress={() => NavigatorUtil.goRecycleDeviceModel()}
        />
        <ImageButton
          source={require("../img/ic_pad_recycle.png")}
          text="平板回收"
          style={styles.flex}
          itMargin={0}
          imgHeight={scale * 62}
          imgWidth={scale * 58}
          onPress={() => NavigatorUtil.goPadRecycleDeviceModel()}
        />
        <ImageButton
          source={require("../img/ic_store_location.png")}
          text="门店地址"
          style={styles.flex}
          itMargin={0}
          imgHeight={scale * 62}
          imgWidth={scale * 58}
          onPress={() => this.handleGetStoreAddress()}
        />
      </View>
    );
  }
  renderProblems() {
    return (
      <View>
        <Text style={styles.text_subtitle}>常见问题</Text>
        <View style={styles.buttonsContainer}>
          <ImageButton
            source={require("../img/ic_screen.png")}
            text="屏幕"
            style={styles.flex}
            imgHeight={scale * 28}
            imgWidth={scale * 28}
            itMargin={scale * 8}
            onPress={() => NavigatorUtil.goMaintainDeviceModel(1)}
          />
          <ImageButton
            source={require("../img/ic_dianchi.png")}
            text="电池"
            style={styles.flex}
            imgHeight={scale * 28}
            imgWidth={scale * 28}
            itMargin={scale * 11}
            onPress={() => NavigatorUtil.goMaintainDeviceModel(6)}
          />
          <ImageButton
            source={require("../img/ic_take_photo.png")}
            text="拍照/摄像"
            style={styles.flex}
            imgHeight={scale * 28}
            imgWidth={scale * 28}
            itMargin={scale * 8}
            onPress={() => NavigatorUtil.goMaintainDeviceModel(5)}
          />
          <ImageButton
            source={require("../img/ic_update_memory.png")}
            text="升级内存"
            style={styles.flex}
            imgHeight={scale * 28}
            imgWidth={scale * 28}
            itMargin={scale * 8}
            onPress={() => NavigatorUtil.goUpdateInfo()}
          />
        </View>
        <View style={styles.subButtonsContainer}>
          <ImageButton
            source={require("../img/ic_voice.png")}
            text="声音"
            style={styles.flex}
            imgHeight={scale * 28}
            imgWidth={scale * 28}
            itMargin={scale * 8}
            onPress={() => NavigatorUtil.goMaintainDeviceModel(4)}
          />
          <ImageButton
            source={require("../img/ic_waike.png")}
            text="外壳/后盖"
            style={styles.flex}
            imgHeight={scale * 28}
            imgWidth={scale * 28}
            itMargin={scale * 11}
            onPress={() => NavigatorUtil.goMaintainDeviceModel(3)}
          />
          <ImageButton
            source={require("../img/ic_button.png")}
            text="按键"
            style={styles.flex}
            imgHeight={scale * 28}
            imgWidth={scale * 28}
            itMargin={scale * 8}
            onPress={() => NavigatorUtil.goMaintainDeviceModel(2)}
          />
          <ImageButton
            source={require("../img/ic_other_problem.png")}
            text="其他故障"
            style={styles.flex}
            imgHeight={scale * 28}
            imgWidth={scale * 28}
            itMargin={scale * 8}
            onPress={() => NavigatorUtil.goMaintainDeviceModel(7)}
          />
        </View>
      </View>
    );
  }

  renderOrder() {
    const { props } = this;
    return (
      <View style={styles.center}>
        <TouchableOpacity onPress={() => NavigatorUtil.goQuickOrder()}>
          <ImageBackground style={styles.img_bg} source={require("../img/bg_recycle_now.png")}>
            <View style={styles.orderContent}>
              <Text style={styles.text_subtitle2}>一键预约</Text>
              <Text style={styles.text_desc}>工作人员会与你主动联系</Text>
              <Text style={styles.text_desc}>沟通具体问题</Text>
              <NCText text="立即预约" style={styles.buttonStyle} textStyle={styles.buttonTextStyle} />
            </View>
          </ImageBackground>
        </TouchableOpacity>
      </View>
    );
  }

  handleTagClick(item, index) {
    const { props } = this;
    const { homeReducer } = props;
    const { brandId } = homeReducer;
    brandId !== item.brand_id && props.dispatch(homeAction.onTagClick(item));
  }

  renderHotMaintain() {
    const { homeReducer } = this.props;
    const { hotInfoList, brandId, hotTags } = homeReducer;
    return (
      <View>
        <Text style={styles.text_subtitle}>热门维修</Text>
        <View style={styles.hotTagsConatiner}>
          {hotTags.map((item, index) => (
            <Tag
              key={String(item.brand_id)}
              text={item.brand_name}
              selected={brandId === item.brand_id}
              onPress={() => this.handleTagClick(item, index)}
            />
          ))}
        </View>
        <View style={styles.hotListConatiner}>
          {hotInfoList.map((item, index) => (
            <HotPhoneItem
              onPress={() => NavigatorUtil.goServiceInfo(item)}
              key={String(item.service_price_id)}
              title={item.facility_name}
              desc={item.price_title}
              price={item.make_price}
              source={{ uri: NetWorkUtil.getFileUrl(item.facility_src) }}
            />
          ))}
        </View>
      </View>
    );
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <ScrollView style={styles.container}>
          {this.renderSwiper()}
          {this.renderMainButtons()}
          {this.renderProblems()}
          {this.renderOrder()}
          {this.renderHotMaintain()}
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.white,
  },
  flex: {
    flex: 1,
  },
  swiper: {
    width: ScreenWidth,
    height: scale * 150,
    backgroundColor: "white",
  },
  center: {
    alignItems: "center",
    marginBottom: scale * 20,
  },
  orderContent: {
    marginLeft: ScreenWidth * 0.1,
    height: scale * 150,
    justifyContent: "center",
  },
  banner: {
    width: ScreenWidth - 2 * BANNERLEFT,
    height: scale * 150,
    marginLeft: -0.2 * BANNERLEFT,
    borderRadius: scale * 5,
    borderWidth: 0,
  },
  text_subtitle: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
    fontWeight: "bold",
    marginTop: scale * 20,
    marginLeft: scale * 18,
  },
  text_subtitle2: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
    fontWeight: "bold",
    marginBottom: scale * 12,
  },
  text_desc: {
    fontSize: FontSize.SIZE_12,
    color: Color.text_assist,
    marginTop: scale * 4,
  },
  buttonsContainer: {
    flexDirection: "row",
    marginVertical: 24 * scale,
  },
  subButtonsContainer: {
    flexDirection: "row",
  },
  img_bg: {
    marginTop: 30 * scale,
    width: ScreenWidth - scale * 20,
    height: scale * 150,
  },
  buttonStyle: {
    height: 30 * scale,
    width: 112 * scale,
    marginTop: 18 * scale,
    borderRadius: 6 * scale,
    borderColor: "#FE8441",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#FE8441",
  },
  buttonTextStyle: {
    fontSize: FontSize.SIZE_13,
    color: Color.white,
  },
  hotTagsConatiner: {
    paddingHorizontal: scale * 8,
    flexDirection: "row",
    flexWrap: "wrap",
    paddingTop: scale * 20,
    paddingBottom: scale * 12,
  },
  hotListConatiner: {
    paddingHorizontal: scale * 8,
    flexDirection: "row",
    flexWrap: "wrap",
    marginBottom: scale * 30,
  },
});

const reducers = state => {
  return {
    homeReducer: state.homeReducer,
  };
};

export default connect(reducers)(Home);
